<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file="/views/common/taglib.jsp"%>
<html>
<head>
	<link rel="stylesheet" href="/ownerConn/css/comment.css" type="text/css">
	<script src="${ctx}/js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
	
	
	var id;
	var score;
	$(function (){
		$('.comment-box').find('.pic-box').each(function(){
			$(this).trigger("click");
		})
	});
	
	function showStars(id, score){
		for(var i = 0; i < score; i++) {
			$("#showstars_"+id).children("img[id='stars"+ i + "_" + id + "']").attr("src","/ownerConn/images/star1.png");
		}
		 for(var j = 0; j < 5-score; j++) {
			$("#showstars_"+id).children("img[id='stars" +(4-j) + "_" + id + "']").attr("src","/ownerConn/images/star2.png");
		} 
	}
	
     //单击事件
	function changeState(state,goodsId){
		window.location.href = ctx +"/common/getGoodsComment?pNo=1" + "&state=" + state + "&goodsId=" + goodsId;
	}
     
    //判断state状态，赋样式
    function changeClass(state) {
  		if(state == 1) {
       		$("#all").addClass("current");
       	} else if (state == 2) {
       		$("#goodComment").addClass("current");
       	} else if (state == 3) {
       		$("#normalComment").addClass("current");
       	} else if (state == 4) {
       		$("#badComment").addClass("current");
       	}
    	
    }
	</script>
</head>
	
<body onload="changeClass(${state})">
	<div class="ul-box">
	<input type="hidden" id="abc" />
		<ul id="changecolor">
			<li id="all" class="" style="cursor:pointer" onclick="changeState(1,${goodsId})">
				<p>全部</p>
				<p>${total}</p>
			</li>
			<li id="goodComment" class="" style="cursor:pointer" onclick="changeState(2,${goodsId})">
				<p>好评</p>
				<p>${commentCount.goodComment}</p>
			</li>
			<li id="normalComment" class="" style="cursor:pointer" onclick="changeState(3,${goodsId})">
				<p>中评</p>
				<p>${commentCount.normalComment}</p>
			</li>
			<li id="badComment" class="" style="cursor:pointer" onclick="changeState(4,${goodsId})">
				<p>差评</p>
				<p>${commentCount.badComment}</p>
			</li>
		</ul>
	</div>
	<div class="comment-box">
		<c:forEach items="${goodsComment.list}" var="item" varStatus="vStatus">
			<ul>
				<li>
					<div class="star-box">
						<div class="pic-box" id="showstars_${item.id}" onclick="showStars('${item.id}','${item.score}')">
							<img id="stars0_${item.id}" src="" />
							<img id="stars1_${item.id}" src="" />
							<img id="stars2_${item.id}" src="" />
							<img id="stars3_${item.id}" src="" />
							<img id="stars4_${item.id}" src="" />
							<!-- <img id="1" src="/ownerConn/images/star1.png" />
							<img id="2" src="/ownerConn/images/star1.png" />
							<img id="3" src="/ownerConn/images/star1.png" />
							<img id="4" src="/ownerConn/images/star1.png" />
							<img id="5" src="/ownerConn/images/star1.png" /> -->
							
						</div>
						<div class="time">
							<span class="name">${item.userAccount}&nbsp;&nbsp;</span>
							<span class="day"> <fmt:formatDate value="${item.sendTime}" type="BOTH" 
							dateStyle="long" timeStyle="long"/></span>	
						</div>
					</div>
					<p >${item.content}</p>
				</li>
			</ul>
    	</c:forEach>
	</div>
</body>
<script type="text/javascript">
var ctx = '${ctx}';
	setCtx(ctx);
</script>
</html>